<!--过滤查询-->
<nz-row>
  <div class="searchItem">
    <label for="date">操作时间</label>
    <nz-range-picker id="date" nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label for="category">标签分类</label>
    <nz-select id="category" [(ngModel)]="query.tagList" nzPlaceHolder="请选择" [nzBackdrop]="true" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzShowSearch>
      <nz-option [nzValue]="c['content']" [nzLabel]="c['name']"
                 *ngFor="let c of category"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label for="typeName">用户ID</label>
    <input id="typeName" nz-input placeholder="请输入ID/姓名/联系方式" [(ngModel)]="query.userId"/>
  </div>
  <div class="searchItem">
    <label for="tageContent">标签内容</label>
    <input id="tageContent" nz-input placeholder="多个关键字用英文逗号分隔" [(ngModel)]="query.contentList"/>
  </div>
  <div class="searchItem">
    <label for="userType">用户身份</label>
    <nz-select id="userType" [(ngModel)]="query.userType" nzPlaceHolder="请选择" [nzBackdrop]="true"
               nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzShowSearch>
      <nz-option [nzValue]="1" nzLabel="个人"></nz-option>
      <nz-option [nzValue]="2" nzLabel="门店商户"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
</nz-row>
<div style="margin-bottom: 8px">
  <button nz-button nzType="primary" (click)="export()">导出</button>
</div>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzTableLayout="fixed"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="listOfData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="listOfData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center" [nzWidth]="'100px'">ID</th>
    <th nzAlign="center">标签分类</th>
    <th nzAlign="center">标签内容</th>
    <th nzAlign="center">用户id</th>
    <th nzAlign="center">操作人</th>
    <th nzAlign="center">操作时间</th>
    <th nzAlign="center">备注</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="250px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data;let index=index;"
      [ngStyle]="{'color': data['status'] == 0 ? '' : 'rgba(0,0,0,.3)'}">
    <td nzAlign="center">{{ data['id'] }}</td>
    <td nzAlign="center">{{ data['tagClassify'] }}</td>
    <td nzAlign="center">{{ data['tagContent'] }}</td>
    <td nzAlign="center">
      <a  [routerLink]="'/customer/tabs/'+data['userId']+'/0'" target="_blank">
      {{ data['userId'] }}
      </a>
    </td>
    <td nzAlign="center">{{ data['operator'] }}</td>
    <td nzAlign="center">{{ data['operateTime'] }}</td>
    <td nzAlign="center">{{ data['remark'] }}</td>
    <td nzAlign="center"
        [ngStyle]="{'color': data['status'] == 0 ? '#67C23A' : 'rgba(0,0,0,.3)'}">{{ data['status'] == 0 ? '正常' : '作废' }}</td>

    <td nzAlign="center">
      <a style="color: #F56C6C" *ngIf="data['status'] == 0"
         (click)="showDestroyLabelModal(data)">作废</a>
      <a style="color: #1890ff" *ngIf="data['status'] == 0" (click)="addLabel(data['userId'])">打标</a>
    </td>
  </tr>
  </tbody>
</nz-table>
<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ listOfData.total }} 条</ng-template>

<!--作废-->
<nz-modal
  [nzVisible]="destroyLabelModal.visible"
  nzWidth="320px"
  nzTitle="提示"
  (nzOnCancel)="hideDestroyLabelModal()">
  <div *nzModalContent>
    <div>
      该操作不可逆，确认作废？
    </div>
    <div>
      你也可以在下方输入作废原因：
    </div>
    <div class="row">
        <textarea style="width: 300px!important;"
                  nz-input
                  [maxLength]="100"
                  [(ngModel)]="destroyLabelModal.remark"
                  placeholder="请输入原因"
                  [nzAutosize]="{ minRows: 2, maxRows: 6 }"
        ></textarea>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideDestroyLabelModal()">取消</button>
    <button nz-button nzType="primary" (click)="destroyLabel()">确认</button>
  </div>
</nz-modal>
